<template>
	<view class="page-body">
		<view class="header" :style="{position:headerPosition,top:headerTop}">
			<view class="search-box">
			<mSearch class="mSearch-input-box" type="2" :mode="2" button="inside" @search="doSearch(false)" @input="inputChange" @confirm="doSearch(false)" v-model="keyword" ></mSearch>
			</view>
			<view class="flex tab">
				<view class="target" v-for="(target,index) in orderbyList" @tap="select(index)" :key="index" :class="[target.selected?'on':'']">
					{{target.text}}
					<view v-if="target.orderbyicon" class="icon" :class="target.orderbyicon[target.orderby]"></view>
				</view>
			</view>
		</view> 
		<!-- 占位 -->
		<view class="place"></view>
		<!-- 商品列表 -->
		<goods :listData="listData"></goods>
		<load-more  :listnull="listnull" :loadtype="loadtype" text0="正在加载中..." text2=" " >
			<block slot="null">
				<view :style="{'height':winHeight}" >
					<defalut type="10" flexend="true"></defalut>
				</view>
			</block>
		</load-more>
	</view>
</template>

<script>
	var that;
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import defalut from '@/components/defalut.vue';
	import loadMore from '@/components/load-more.vue';
	import {pageLoad} from '@/utils/request.js';
	import goods from '@/components/goods.vue'
	import mSearch from '@/components/mehaotian-search-revision/mehaotian-search-revision.vue';
	export default {
		data() {
			return {
				goodsList:[],
				loadingText:"正在加载...",
				headerTop:"0px",
				headerPosition:"fixed",
				orderbyList:[
					{text:"销量",type:"sales_volume",selected:true,orderbyicon:true,orderby:0},
					{text:"价格",type:"shop_price",selected:false,orderbyicon:['sheng','jiang'],orderby:0},
					{text:"上架时间",type:"add_time",selected:false,orderbyicon:['sheng','jiang'],orderby:0}
				],
				page:1,
				listData:[],
				loadtype:1,
				listnull:false,
				winHeight:this.$store.state.winHeight,
				orderby:"sheng",
				keyword:"",//关键字
				cat_id:"",//分类
				is_real:"",//实物
				is_hot:"",
				is_best:"",//
				is_price:"",//价格排序
				sortby:"sales_volume desc"
			};
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			that=this;
			if(option.key){//搜索关键字
				this.keyword = option.key;
			}
			if(option.cid){
				this.cat_id = option.cid
			}
			uni.setNavigationBarTitle({
				title: option.name||""
			});
			this.getGoodList(true)
			
		},
		onReady(){
			//兼容H5下排序栏位置
			// #ifdef H5
				//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
				// let Timer = setInterval(()=>{
					let uniHead = document.getElementsByTagName('uni-page-head');
					if(uniHead.length>0){
						this.headerTop = uniHead[0].offsetHeight+'px';
						// clearInterval(Timer);//清除定时器
					}
				// },1);
			// #endif
		},
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			if(e.scrollTop>=0){
				this.headerPosition = "fixed";
			}else{
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
				// this.reload();
		    uni.stopPullDownRefresh();
		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom(){
			this.getGoodList(false)
		},
		methods:{
			getGoodList(isReload){
				let keywords = this.keyword;
				let cat_id = this.cat_id;
				let is_hot = this.is_hot;
				let sort = this.sortby;
				pageLoad({
					url:"/goods/goodsList",
					that: that,
					isReload: isReload,
					data:{
						keywords:keywords,
						cat_id:cat_id,
						sort:sort
					},
					success(res){
						res.data.forEach((item)=>{
							item.loaded = false
						})
						uni.stopPullDownRefresh();
					}
				})
			},
			doSearch(){
				this.getGoodList(true)
				this.saveKeyword(this.keyword);
			},
			//商品跳转
			toGoods(e){
				uni.showToast({title: '商品'+e.goods_id,icon:"none"});
				uni.navigateTo({
					url: '../goods' 
				});
			},
			//排序类型
			select(index){
				// 价格升降
				if(this.orderbyList[index].orderbyicon){
					this.orderbyList[index].orderby==0?1:0;
					if(this.orderbyList[index].selected){
						this.orderbyList[index].orderby = this.orderbyList[index].orderby==0?1:0;
					}
				}
				
				this.orderbyList[index].selected = true;
				let selectType = this.orderbyList[index].type;
				if(selectType=="shop_price"){
					this.sortby = this.orderbyList[index].orderby == 0?'shop_price asc':'shop_price desc'
				}else if(selectType=="add_time"){
					this.sortby = this.orderbyList[index].orderby == 0?'add_time asc':'add_time desc'
				}else if(selectType == "sales_volume"){
					this.sortby = this.orderbyList[index].orderby == 0?'sales_volume asc':'sales_volume desc'
				}else{
					this.sortby = selectType
				}
				let len = this.orderbyList.length;
				for(let i=0;i<len;i++){
					if(i!=index){
						this.orderbyList[i].selected = false;
					}
				}
				this.getGoodList(true)
			},
			//保存关键字到历史记录
			saveKeyword(keyword) {
				uni.getStorage({
					key: 'OldKeys',
					success: (res) => {
						console.log(res.data);
						var OldKeys = JSON.parse(res.data);
						var findIndex = OldKeys.indexOf(keyword);
						if (findIndex == -1) {
							OldKeys.unshift(keyword);
						} else {
							OldKeys.splice(findIndex, 1);
							OldKeys.unshift(keyword);
						}
						//最多10个纪录
						OldKeys.length > 10 && OldKeys.pop();
						uni.setStorage({
							key: 'OldKeys',
							data: JSON.stringify(OldKeys)
						});
						this.oldKeywordList = OldKeys; //更新历史搜索
					},
					fail: (e) => {
						var OldKeys = [keyword];
						uni.setStorage({
							key: 'OldKeys',
							data: JSON.stringify(OldKeys)
						});
						this.oldKeywordList = OldKeys; //更新历史搜索
					}
				});
			},
			inputChange(){
				
			}
		},
		components:{
			defalut,
			loadMore,
			goods,
			mSearch
		},
		onUnload(){
			that=null;
		}
		
	}
</script>

<style lang="scss">
	.search-box{width:690upx;background-color:rgb(242,242,242);padding:0 30upx;display:flex;justify-content:space-between;flex: 1; align-items: center;height: 100upx;}
	.icon {
		font-size:26upx;
	}
	.header{
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #fff;
		border-bottom: solid 1upx #eee;
		.tab{
			padding: 0 20upx;
			height: 80upx;
			line-height: 80upx;
			box-sizing: border-box;
			justify-content: center;
		}
		.target{
			width:30%;
			margin: 0 20upx;
			height: 78upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28upx;
			margin-bottom: -2upx;
			color: #aaa;
			&.on{
				color: #555;
				border-bottom: 4upx solid #f06c7a;
				font-weight: 600;
				font-size: 30upx;
			}
			
			
		}
	}
.place{
		background-color: #ffffff;
		height: 210upx;
	}
.goods-list{
		.loading-text{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 60upx;
			color: #979797;
			font-size: 24upx;
		}
		.product-list{
			width: 92%;
			padding: 0 4% 3vw 4%; 
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.product{
				width: 48%;
				border-radius: 20upx;
				background-color: #fff;
				margin: 0 0 15upx 0;
				box-shadow: 0upx 5upx 25upx rgba(0,0,0,0.1);
				image{
					width: 100%;
					border-radius: 20upx 20upx 0 0;
				}
				.name{
					width: 92%;
					padding: 10upx 4%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-align: justify;
					overflow: hidden;
					font-size: 30upx;
				}
				.info{
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					width: 92%;
					padding: 10upx 4% 10upx 4%;
					
					.price{
						color: #e65339;
						font-size: 30upx;
						font-weight: 600;
					}
					.slogan{
						color: #807c87;
						font-size: 24upx;
					}
				}
			}
			
		}
	}
</style>
